import React from 'react'
import { useState } from 'react'
import One from './One';
import Three from './Three';
import Two from './Two';

export default function DiffCom() {
  //声明一个状态
  let [count, setCount] = useState(0);
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => {setCount(count + 1)}}>新增</button>

      <h2>不同类型元素的处理</h2>
      {count % 2 === 0   ?   <span>你好</span>  : <b>Hello World</b>}

      <h2>不同类型的组件处理</h2>
      {count % 2 === 0   ?   <One />  : <Two />}

      <h2>相同类型元素的处理</h2>
      {count % 2 === 0   ?   <h4 title='你好'>你好</h4>  : <h4 title="hello">Hello</h4>}

      <h2>相同类型组件的处理</h2>
      {count % 2 === 0 ? <Three name="张三" /> : <Three name="李四" />}

    </div>
  )
}
